package com.songxian.wechatcompose.ui

import android.renderscript.ScriptGroup
import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.rengwuxian.wecompose.data.Chat
import com.rengwuxian.wecompose.data.Msg
import com.rengwuxian.wecompose.data.User
import com.songxian.wechatcompose.R
import com.songxian.wechatcompose.WeViewModel
import com.songxian.wechatcompose.ui.theme.WeTheme
import dev.chrisbanes.accompanist.insets.navigationBarsHeight
import dev.chrisbanes.accompanist.insets.navigationBarsPadding

/**
 * Created by Administrator on 2021/4/21 0021.
 * Describe:
 */


@Composable
fun ChatPage(chat: Chat, onBack: () -> Unit) {
    val viewModel: WeViewModel = viewModel()
    Column(Modifier.fillMaxSize()) {
        WeTopBar(title = chat.friend.name, onBack)

        val shakingOffset = remember { Animatable(0f) }

        Column(
            Modifier
                .weight(1f)
                .background(WeTheme.colors.chatPage)
        ) {
            LazyColumn(
                Modifier.fillMaxSize()
                    .offset(shakingOffset.value.dp, shakingOffset.value.dp)
            ) {
                items(chat.msgs.size) { index ->
                    val msg = chat.msgs[index]
                    MessageItem(msg = msg)
                }
            }
        }

        ChatBottomBar({
            viewModel.boom(chat)
        })
    }
}

@Composable
fun ChatBottomBar(onBombClicked: () -> Unit) {

    var editingText by remember { mutableStateOf("") }

    WeBottomBar {
        Icon(
            painter = painterResource(id = R.drawable.ic_voice),
            contentDescription = null,
            Modifier
                .size(40.dp)
                .padding(8.dp)
                .align(Alignment.CenterVertically),
            tint = WeTheme.colors.icon
        )
        BasicTextField(
            value = editingText,
            onValueChange = { editingText = it },
            Modifier
                .weight(1f)
                .padding(4.dp, 8.dp)
                .clip(RoundedCornerShape(4.dp))
                .background(WeTheme.colors.textFieldBackground)
                .height(40.dp)
                .padding(6.dp)
        ) {

        }
        Text(
            text = "\uD83D\uDCA3",
            Modifier
                .clickable {
                    onBombClicked()
                }
                .padding(8.dp)
                .align(Alignment.CenterVertically),
            fontSize = 24.sp
        )
        Icon(
            painter = painterResource(id = R.drawable.ic_add), contentDescription = null,
            Modifier
                .size(40.dp)
                .padding(8.dp)
                .align(Alignment.CenterVertically),
            tint = WeTheme.colors.icon
        )
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewChatPage() {
    val viewModel: WeViewModel = viewModel()
//    val chat = viewModel.chatPreview
    val chat = Chat(
        friend = User("gaolaoshi", "高老师", R.drawable.avatar_1),
        mutableListOf(Msg(User("gaolaoshi", "高老师", R.drawable.avatar_1), "哈哈"))
    )
    ChatPage(chat) {

    }
}

@Composable
fun MessageItem(msg: Msg) {
    val viewModel: WeViewModel = viewModel()
    val bubbleOthers = WeTheme.colors.bubbleOthers

    if (msg.from == User.Me) {
        Row(
            Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.End
        ) {
            Text(
                text = msg.text,
                Modifier
                    .padding(start = 20.dp)
                    .align(Alignment.CenterVertically)
                    .drawWithContent {
                        drawRoundRect(
                            color = bubbleOthers,
//                            Offset(0.dp.toPx(), 0.dp.toPx())
                            cornerRadius = CornerRadius(4.dp.toPx(), 4.dp.toPx())
                        )
                        drawContent()

                    }
                    .padding(10.dp, 6.dp),
                fontSize = 14.sp,
                color = WeTheme.colors.textPrimary
            )
            AvatarList(iconId = msg.from.avatar)

        }
    } else {
        Row(
            Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Start
        ) {
            AvatarList(iconId = msg.from.avatar)
            Text(
                text = msg.text,
                Modifier
                    .padding(end = 20.dp)
                    .align(Alignment.CenterVertically)
                    .drawWithContent {
                        drawRoundRect(
                            color = bubbleOthers,
                            cornerRadius = CornerRadius(4.dp.toPx(), 4.dp.toPx())
                        )
                        drawContent()

                    }
                    .padding(10.dp, 6.dp),
                fontSize = 14.sp,
                color = WeTheme.colors.textPrimary
            )
        }
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewMessageItem() {
    MessageItem(Msg(User("1", "黄哈哈哈", R.drawable.avatar_1), "在吗"))
}


@Preview(showBackground = true)
@Composable
fun PreviewChatBottomBar() {
    ChatBottomBar({})
}


